<template>
	<z-paging ref="paging" v-model="dataList" bg-color="#fff" auto-show-system-loading @query="getList">
		<view slot="top">
			<view class="Narbar">
				<view class="back" :style="{ height: heightConfig.navBarPaddingTop + 'px' }"></view>
				<view class="Narbar_bo">
					<view></view>
					<!-- <view class="title" size="19px">积分</view> -->
					<view></view>
				</view>
				<view class="bg">
					<view class="points">
						<view class="pointsValue">{{ creditScore }}</view>
						<text class="text">当前积分</text>
					</view>

					<view class="order">
						<view class="data" v-for="(item, index) in gridList" :key="index"
							@click.stop="toPage(item.url)">
							<image :src="item.image" style="margin-right: 10rpx;"></image>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view slot="empty">
			<!-- <Empty /> -->
		</view>
		<view class="recommend-top">
			<image src="../static/images/mall_3.png" style="margin-right: 10rpx;"></image>
			积分兑换
			<image src="../static/images/mall_3.png" style="margin-left: 10rpx;"></image>
		</view>
		<view class="recommend">
			<view v-for="(item, index) in dataList" :key="index" class="recommendi">
				<view class="image">
					<image :src="baseImgUrl + item.goodImg"></image>
				</view>
				<view class="name">{{ item.goodName }}</view>
				<view class="leftRight">
					<view class="left">
						<span>{{ item.integral }}积分</span>
						<span v-if="item.redemptionSet !='1'">+￥{{ item.price }}</span>
					</view>
					<!--  -->
					<view class="right"   v-if="
              memberUserInfo.memberLevel != 0 &&
              memberUserInfo.memberAgencyLevel != 0
            "     @click="toPay(item)">兑换</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import integralApi from "@/api/integral";
	import {
		getToken
	} from "@/utils/auth";
	import {
		formatBigNumber
	} from "@/utils/index";
	import {
		baseImgUrl
	} from "@/config";
	import userApi from "@/api/user";
	export default {
		data() {
			return {
				baseImgUrl,
				heightConfig: {},
				creditScore: 0,
				remainingSum: 0,
				goodId: null,
				dataList: [],
				memberUserInfo: {},
				gridList: [{
						image: "../static/images/mall_1.png",
						name: "获取积分",
						url: "/subPages/mine/myPoints",
					},
					{
						image: "../static/images/mall_2.png",
						name: "积分明细",
						url: "/subPages/mine/integralDetail",
					},
					// {
					//   image: "../static/images/myPoints/pointsMall/PointsRule.png",
					//   name: "积分规则",
					//   url: "",
					// },
				],
				token: "",
			};
		},
		onLoad() {
			this.heightConfig = this.$store.getters.heightData;
		},
		onShow() {
			const token = getToken();
			this.token = token;
			// if (!token) {
			//   uni.navigateTo({
			//     url: "/pages/login",
			//   });
			//   return;
			// }
			if (token) {
				this.getIntegralGoodList();
				this.getUserInfo();
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				userApi.fetchUserInfo().then((res) => {
					if (res.code == 200) {
						this.memberUserInfo = res.memberUserInfo;
					}
				});
			},
			getList(pageNum, pageSize) {
				if (!this.token) {
					this.$refs.paging.complete(false);
					return;
				}
				integralApi
					.getIntegralGoodList()
					.then((res) => {
						if (res.code == 200) {
							// this.creditScore = formatBigNumber(res.data.creditScore);
							this.creditScore = res.data.creditScore;
							this.remainingSum = formatBigNumber(res.data.remainingSum);
							this.$refs.paging.complete(res.data.appletBdmIntegralGoodVos);
						}
					})
					.catch(() => {
						this.$refs.paging.complete(false);
					});
			},
			getIntegralGoodList() {
				integralApi.getIntegralGoodList().then((res) => {
					if (res.code == 200) {
						// this.creditScore = formatBigNumber(res.data.creditScore);
						this.creditScore = res.data.creditScore;
						this.remainingSum = formatBigNumber(res.data.remainingSum);
						this.dataList = res.data.appletBdmIntegralGoodVos;
					}
				});
			},
			toPage(url) {
				uni.navigateTo({
					url: url,
				});
			},
			toPay(item) {
				const token = getToken();
				if (!token) {
					uni.navigateTo({
						url: "/pages/login",
					});
				} else {
					if(item.redemptionSet =='1'){
						item.price = 0
					}
					uni.navigateTo({
						url: `/subPages/details/confirmOrder?source=integral&id=${item.id}&price=${item.price}&integral=${item.integral}`,
					});
				}
			},
			sumbit() {},
		},
	};
</script>

<style lang="less" scoped>
	.recommend-top {
		font-weight: 500;
		font-size: 32rpx;
		background-color: #f4f4f4;
		color: #404040;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.Narbar {
		width: 100%;
		height: 416rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(46deg, #FFD8D6 0%, #FFC7E1 100%);
		background-size: 100% 100%;

		.back {
			width: 100%;
		}

		.Narbar_bo {
			width: 100%;
			height: 35px;
			display: flex;
			padding: 0 28rpx;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 18px;
				font-weight: 600;
			}
		}

		.bg {
			width: 85%;
			margin: 25px 0;
			height: 180px;
			background-size: 100% 100%;
			position: relative;

			.points {
				width: 100%;
				height: 50%;
				padding-left: 20px;
				padding-top: 8px;

				position: absolute;
				bottom: 80rpx;
				left: 0rpx;

				.pointsValue {
					padding-top: 5px;
					font-weight: 500;
					font-size: 64rpx;
					color: #404040;
				}
			}

			.order {
				width: 100vw;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				background: rgba(255, 229, 230, 0.5);
				position: absolute;
				bottom: -50rpx;
				left: -50rpx;

				.data {
					width: 30%;
					height: 100%;
					display: flex;
					// flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}

	.recommend {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20px;
		background-color: #f4f4f4;
	}

	.recommendi {
		width: 48%;
		margin: 20rpx 0;
		padding-bottom: 10rpx;
		position: relative;
		border-radius: 5%;
		background-color: #fff;

		.image {
			width: 100%;
			height: 335rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 5% 5% 0 0;
			}
		}

		.name {
			width: 100%;
			margin: 10rpx 0 10rpx;
			font-size: 28rpx;
			font-weight: 600;
			font-family: "PingFang SC";
			letter-spacing: 2rpx;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0 10rpx;
		}

		.leftRight {
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx;
			.left {
				color: #ff4254;
				font-size: 26rpx;
			}

			.right {
				background-color: #ff4254;
				border-radius: 8rpx;
				color: #fff;
				padding: 5rpx 20rpx;
				font-size: 20rpx;
			}
		}
	}
</style>